<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 音频就绪自动播放，向用户显示控件比如播放按钮-->
<audio src="" autoplay controls id="player"></audio>
<p>
    <button onclick="start_reco()">开始录音</button>
</p>
<p>
    <button onclick="stop_reco()">停止录音</button>
</p>

</body>
<script src="/static/Recorder.js"></script>  <!-- 前端调用录音的接口 -->
<script src="/static/jQuery3.1.1.js"></script>
<script type="text/javascript">
    // var serv = "http://192.168.15.108:5000";
    var serv = "http://127.0.0.1:5000";
    var audio_serv = serv + "/get_audio/";
    var audio_context = new AudioContext();
    navigator.getUserMedia = (navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia);

    navigator.getUserMedia({audio: true}, create_stream, function (err) {
        console.log(err)
    });

    function create_stream(user_media) {
        var stream_input = audio_context.createMediaStreamSource(user_media);
        reco = new Recorder(stream_input);
    }

    function start_reco() {
        reco.record();
    }

    function stop_reco() {
        reco.stop();
        get_audio();
        reco.clear();
    }

    function get_audio() {
        reco.exportWAV(function (wav_file) {
            // wav_file 音频文件 Blob("wav","context")
            console.log(wav_file);
            var formdata = new FormData();
            formdata.append("reco", wav_file);
            $.ajax({
                    url: serv + "/uploader",
                    type: 'post',
                    processData: false,
                    contentType: false,
                    data: formdata,
                    dataType: 'json',
                    success: function (data) {
                        document.getElementById("player").src = audio_serv + data.filename;
                    }
                }
            );
        })
    }
</script>
</html>